<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
    <title>Document</title>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 头部 -->
        {{include'./Public_documents/header.html'}}

        <!-- 左侧 -->
        {{include'./Public_documents/Left_menu.html'}}

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <span class="layui-breadcrumb" lay-separator=">">
                <a href="/">首页</a>
                <a href="/add">文章编辑</a>
            </span>
            <div style="padding: 15px;">
                <form action="/update" class="layui-form" method="post" enctype="multipart/form-data">
                    <div class="layui-form-item">
                        <input type="hidden" id="id" name="id" value="">
                        <input type="hidden" id="oldImg" name="oldImg" value="">
                        <label class="layui-form-label">标题： </label>
                        <div class="layui-input-inline">
                            标题： <input type="text" id="title" name="title" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label">封面: </label>
                        <input type="file" name="img" id="img" id="fengmian" style="display: none;" autocomplete="off">
                        <div class="layui-input-inline">
                            <button type="button" id="upload" class="layui-btn">修改图片</button>
                        </div>
                    </div>
                    <div id="imgWrap" class="layui-form-item" style="display: none;">
                        <label class="layui-form-label" id="img">预览： </label>
                        <div class="layui-input-inline">
                            <img src="" id="preview-img" width="150px">
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label ">作者： </label>
                        <div class="layui-input-inline">
                            <input type="text" id="author" name="author" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label id='AudIt_status'">审核：</label>
                        <div class="layui-input-block">
                            待审核<input type="radio" name="AudIt_status" value='0'>
                            审核通过<input type="radio" name="AudIt_status" value='1'>
                            审核失败<input type="radio" name="AudIt_status" value='2'>
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label "> 所属分类： </label>
                        <div class="layui-input-inline">
                            <select name="sort" id='sort'>
                                <option value="0">请选择</option>
                                {{each sort item index}}
                                <option value="{{item.id}}">{{item.name}}</option>
                                {{/each}}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label "> 内容： </label>
                        <div class="layui-input-block">

                            <textarea id="content" name="content" cols="30" rows="10" class="layui-textarea"></textarea>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label "></label>
                        <div class="layui-input-block">

                            <button class="layui-btn layui-btn-radius layui-btn-normal">确认更新</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/layui-v2.6.8/layui/layui.js"></script>
<script>
    //JS 
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', { icon: 0 });
            }
            , menuRight: function () {
                layer.open({
                    type: 1
                    , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                });
            }
        });

    });
    
    //回显
    window.onload = function () {
        let titleEle = document.getElementById('title');
        let authorEle = document.getElementById('author');

        let statusEle = document.getElementsByName("AudIt_status");
        let selectEle = document.getElementById("sort")
        let contentEle = document.getElementById("content");
        let contentEle = document.getElementById("content");
        let fengmian = document.getElementById("fengmian");

        let imgEle = document.getElementById("img");
        let options = document.querySelectorAll("#cat_id option");

        let status = "{{articles.Audit_status}}";
        let sort = "{{articles.sort}}";

        // 图片二进制
        //对于单选框和复选框，在被选择的状态改变时，发生 onchange 事件。
        // fengmian.onchange = function () {
        //     let fie = this.files[0];

        //     //对图片进行二进制转换
        //     let fileReader = new FileReader()
        //     fileReader.readAsDataURL(file)//readAsDataURL编码数据

        //     //在页面加载后立即执行 onload
        //     fileReader.onload = function () {
        //         imgEle.src = this.result;
        //     }
        // }

        let input = [...statusEle].find((item) => item.value == status)
        input.checked = true;

        titleEle.value = "{{articles.title}}"
        authorEle.value = "{{articles.author}}"
        contentEle.value = "{{articles.content}}"

        selectEle.value = sort;
        console.log(sort)

        let idEle = document.getElementById('id');
        let id = "{{ articles.id}}";
        idEle.value = id;
        document.getElementById('upload').onclick = function () {
            document.getElementById('img').click()
        }

    }
</script>

</html>